﻿<div class="demo-description" id="SwitchMode">
    <h2><DemoNavLink Link="CheckBox#SwitchMode" />CheckBox - Switch Mode</h2>
    <p>
        To activate Switch mode in the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1">CheckBox</a>, set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.CheckType">CheckType</a> property to <b>Switch</b>.
    </p>
</div>

<div class="card demo-card demo-card-sm">
    <ul class="list-group list-group-flush bg-white text-dark" style="border:none">
        <li class="list-group-item" style="background-color:transparent;color:inherit;">
            <DxCheckBox CheckType="CheckType.Switch" LabelPosition ="LabelPosition.Left" style="width:100%" Checked="@SilentMode" CheckedChanged="@((bool t) => CheckedChanged(t))" Alignment="CheckBoxContentAlignment.SpaceBetween">Silent Mode</DxCheckBox>
        </li>
        <li class="list-group-item" style="background-color:transparent;color:inherit;">
            <DxCheckBox CheckType="CheckType.Switch" LabelPosition="LabelPosition.Left" style="width:100%" @bind-Checked="@Sound" Enabled="@Enabled" Alignment="CheckBoxContentAlignment.SpaceBetween">Enable sound</DxCheckBox>
        </li>
        <li class="list-group-item" style="background-color:transparent;color:inherit;">
            <DxCheckBox CheckType="CheckType.Switch" LabelPosition="LabelPosition.Left" style="width:100%" @bind-Checked="@Vibration" Enabled="@Enabled" Alignment="CheckBoxContentAlignment.SpaceBetween">Enable vibration</DxCheckBox>
        </li>
    </ul>
</div>

@code {
    bool Enabled { get; set; } = false;

    bool SilentMode { get; set; } = true;
    bool Sound { get; set; } = true;
    bool Vibration { get; set; } = false;

    void CheckedChanged(bool value) {
        SilentMode = value;
        Enabled = !value;
    }
}

<CodeSnippet_Editor_CheckBox_Switch/>    
